import { Button, Card, Form, Input, message, Table } from "antd";
import React, { useEffect, useState } from "react";
import { SearchOutlined, EditOutlined, DeleteOutlined} from "@ant-design/icons";
import { ColumnsType } from "antd/lib/table";
import {reqBatchRemoveHospitalSet, reqGetHospitalSetList, reqRemoveHospitalSet} from '@api/hospital/hospitalSet'
import type { HospitalSetList, HospitalSetItem } from "@/api/hospital/model/hospitalSetTypes";
import { useForm } from "antd/lib/form/Form";
import { useNavigate } from "react-router-dom";

export default function HospitalSet() {
  //结构
  let columns: ColumnsType<any> = [
    {
      title: "序号",
      dataIndex: "id",
      width: 70,
      align: 'center',
      //自定义渲染  x 是对应属性的值   y 是对应一条数据『对象』  index 是对象的下标 
      render: (x:any, y:any, index: number) => {
        return index + 1;
      }
    },
    {
      title: "医院名称",
      dataIndex: "hosname",  
    },
    {
      title: "医院编号",
      dataIndex: "hoscode",
    },
    {
      title: "api基础路径",
      dataIndex: "apiUrl",
    },
    {
      title: "签名",
      dataIndex: "signKey",
    },
    {
      title: "联系人姓名",
      dataIndex: "contactsName",
    },
    {
      title: "联系人手机号",
      dataIndex: "contactsPhone",
    },
    {
      title: "操作",
      fixed: 'right', //
      //render 参数的说明
      // 如果填写了 dataIndex 属性, 第一个参数就是对应属性的值
      // 如果没有填写 dataIndex 属性, 第一个参数就是『该条记录的对象』
      render: (row: HospitalSetItem) => {
        return <div>
          <Button icon={<EditOutlined />} type="primary" onClick={() => {
            navigate(`/syt/hospital/hospitalSet/edit/${row.id}`)
          }}></Button>
          <Button
            onClick={removeHospitalSet(row.id)}
             className="ml" icon={<DeleteOutlined />} danger type="primary"></Button>
        </div>
      }
    },
  ];

  //声明状态
  let [current, setCurrent] = useState(1);
  let [pageSize, setPageSize] = useState(5);
  let [total, setTotal] = useState(0);

  //声明一个状态, 保存医院设置列表数据            设置泛型参数
  let [hospitalSetList, setHospitalSetList] = useState<HospitalSetList>([]);

  //声明加载中状态
  let [loading, setLoading] = useState(false);

  //声明一个函数 请求获取医院设置列表数据 并显示
  let getHospitalList = async (page=current, limit=pageSize) => {
    try{
      //获取表单中的数据
      let {hoscode, hosname} = form.getFieldsValue();
      //设置为加载中
      setLoading(true);
      //获取医院设置的列表信息
      let result = await reqGetHospitalSetList({page, limit, hosname, hoscode});
      //设置为不加载中..
      setLoading(false);
      //保存数据
      setHospitalSetList(result.records);
      //设置分页的总数
      setTotal(result.total);
    }catch(e){
      message.error('请求失败~~');
    }
  }

  //发送请求
  useEffect(() => {
    //调用函数获取列表数据
    getHospitalList();
  }, [current, pageSize]);

  //获取 form 对象
  let [form] = useForm();

  //声明函数
  let finish = () => {
    //获取表单中的数据
    getHospitalList();
  }
  //表单重置
  let reset = () => {
    //清空表单数据
    form.resetFields();
    //重新发送请求
    getHospitalList();
  }

  //获得 navigate 函数
  let navigate = useNavigate();

  //删除医院设置信息
  let removeHospitalSet = (id: number) => {
    return async () => {
      //发送请求删除
      await reqRemoveHospitalSet(id);
      //提示
      message.success('删除成功');
      //重新发送请求获取医院的数据
      getHospitalList();
    }
  }

  //声明状态
  let [selectedKeys, setSelectedKeys] = useState<React.Key[]>([]);

  //声明事件作为多选框变化的回调
  let change = (selectedRowKeys: React.Key[]) => {
    //当选中的多选框变化以后, 更新状态
    setSelectedKeys(selectedRowKeys);
  }
  //声明删除回调
  let batchRemove = async () => {
    //批量删除
    await reqBatchRemoveHospitalSet(selectedKeys);
    //提示
    message.success('批量删除成功');
    //重新加载数据
    getHospitalList();
  }

  return (
    <Card>
      {/* 表单搜索区域 */}
      <Form 
        form={form} 
        onFinish={finish}
        onReset={reset}
        autoComplete="off" 
        layout="inline">
        <Form.Item name="hosname">
          <Input placeholder="医院名称" />
        </Form.Item>

        <Form.Item name="hoscode">
          <Input placeholder="医院编号" />
        </Form.Item>

        <Form.Item>
          <Button type="primary" htmlType="submit" icon={<SearchOutlined />}>
            查询
          </Button>
        </Form.Item>
        <Form.Item>
          <Button htmlType="reset">清空</Button>
        </Form.Item>
      </Form>
      <div className="h-20"></div>
      {/* 两个按钮 */}
      <div>
        <Button type="primary" onClick={() => {
          navigate('/syt/hospital/hospitalSet/add');
        }}>添加</Button>
        <Button disabled={selectedKeys.length === 0} className="ml" onClick={batchRemove}>
          批量删除
        </Button>
      </div>
      <div className="h-20"></div>
      {/* 表格部分 */}
      <Table 
        loading={loading}
        columns={columns}
        dataSource={hospitalSetList}
        bordered
        rowKey='id'
        scroll={{x: 1300}}
        pagination={{
          total: total, //总条数
          pageSize: pageSize, //每页显示的数量
          current: current, //当前页码
          showQuickJumper: true, //是否显示快速跳转组件
          pageSizeOptions: [2, 5, 10, 15], //调整每页显示的数量 数组
          showSizeChanger: true,
          showTotal: (total) => {
            return <span>总计 {total} 条</span>
          },
          onChange: (page: number, pageSize: number) => {
            //修改当前页
            setCurrent(page);
            //修改每页显示数量
            setPageSize(pageSize);
          }
        }}
        rowSelection={{
          onChange: change
        }}
      />
    </Card>
  );
}
